<template>
  <div class="viewer-banner d-flex flex-column justify-center align-center gap-col-16">
    <div class="font-weight-500" :class="{ 'font-size-14': !isDesktop, 'font-size-16': isDesktop }">
      {{ $t('tilte.adPartner') }}
    </div>
    <div class="banner-col d-flex justify-center align-center" ref="bannerCol" :style="{ width: bannerColWidth }">
      <Banner :item="item" size="lg" disable-close :active="active" :ready="ready" :event-id="eventId"></Banner>
    </div>
    <div class="bottom d-flex justify-center">
      <button class="font-size-14 font-weight-500 line-height-140 primary-btn" @click="$emit('next')">
        {{ $t('common.next2') }}
      </button>
    </div>
  </div>
</template>

<script setup>
import { computed, inject, ref } from 'vue'
import { useElementSize } from '@vueuse/core'
import { storeToRefs } from 'pinia'
import { useAppStore } from '@/store/app'
import { useDesktopViewerStore } from '@/store/desktop-viewer'
import { CREATOR_VIEWER } from '@/constant/viewer-router'
import Banner from './Banner.vue'

const appStore = useAppStore()
const { isDesktop } = storeToRefs(appStore)

defineProps({
  item: { type: Object, required: true },
  active: { type: Boolean },
  ready: { type: Boolean },
})

defineEmits(['next'])

const bannerCol = ref(null)
const { height } = useElementSize(bannerCol)
const bannerColWidth = computed(() => `calc(${(height.value * 640) / 960}px)`)

/**
 * 因為桌面版跟手機版的創作者頁面判斷依據不同，
 * 所以要分開處理再依裝置來判斷 eventId
 */
const page = inject('page', null)
const mobileEventId = computed(() => (page.type === CREATOR_VIEWER ? 68 : 63))
const { mainViewerEventId: desktopEventId } = storeToRefs(useDesktopViewerStore())
const eventId = computed(() => (isDesktop.value ? desktopEventId.value : mobileEventId.value))
</script>

<style lang="scss" scoped>
.viewer-banner {
  width: 100%;
  height: 100%;
  padding: 4.875rem 0 6.5625rem;

  .bottom {
    width: 100%;
    button {
      height: 2rem;
      border-radius: 1.25rem;
    }
  }
}

.desktop {
  .viewer-banner {
    padding: 6.875rem 0 3.5625rem;
  }
}
</style>
